<template>
    <li class="ea-menu-item" role="menuitem" @click="handleClick" :class="{ active: isActive }">
        <div class="flex truncate items-center">
            <slot v-if="$slots.title" name="title" />
            <slot v-else />
        </div>
    </li>
</template>
<script lang="ts" setup>
import { inject, watch, ref } from 'vue'
import type { MenuOptions } from './types'

interface Props {
    index?: string
    route?: string
}

const props = withDefaults(defineProps<Props>(), {
    index: '',
    route: '',
})
const emit = defineEmits<{
    (e: 'click', value: string): void
}>()

const menuOptions = inject<MenuOptions>('menuOptions', {
    activeIndex: ref(''),
    mode: 'unfolding',
    openedSubMenus: ref(new Set()),
    toggleSubMenu: () => {},
})
const isActive = ref<boolean>(false)

watch(
    () => menuOptions.activeIndex.value,
    (newVal) => {
        isActive.value = props.index === props.route && newVal === props.index
    },
    {
        immediate: true,
    },
)

const handleClick = () => {
    emit('click', props.route || props.index)
}
</script>
<style lang="scss" scoped></style>
